<template>
	<view class="content">
		<uni-search-bar radius="5" placeholder="搜索你想看的动态内容" clearButton="always" cancelButton="always" @confirm="search"
			@cancel="cancel" />
		<view class="search-result"></view>

		<uni-notice-bar style="margin-top: 10px;" show-icon :speed="50" scrollable text="以下热榜仅供参考,具体内容根据用户自身所需进行搜索,本小程序不提供有效数据支撑,榜单全由用户自己决定,玩的就是一个真实!" />

		<uni-group title="动态热榜" mode="card">
			<view class="group-item">
				<image class="number" src="../../static/image/1.png"></image>
				<view class="context">吃香的喝辣的的撒活动教案设计大咖就是活动就看撒好的啊</view>
				<image style="width: 20px;height: 20px; position: absolute; right: 50px;" src="../../static/image/热度.png"></image>
				<view style="position: absolute; right: 0px; color: #ffd524;">12345</view>
			</view>
			<view class="group-item">
				<image class="number" src="../../static/image/2.png"></image>
				<view class="context">吃香的喝辣的</view>
				<image style="width: 20px;height: 20px; position: absolute; right: 50px;" src="../../static/image/热度.png"></image>
				<view style="position: absolute; right: 0px; color: #ffd524;">12345</view>
			</view>
			<view class="group-item">
				<image class="number" src="../../static/image/3.png"></image>
				<view class="context">吃香的喝辣的</view>
				<image style="width: 20px;height: 20px; position: absolute; right: 50px;" src="../../static/image/热度.png"></image>
				<view style="position: absolute; right: 0px; color: #ffd524;">12345</view>
			</view>
			<view class="group-item">
				<image class="number" src="../../static/image/4.png"></image>
				<view class="context">吃香的喝辣的</view>
				<image style="width: 20px;height: 20px; position: absolute; right: 50px;" src="../../static/image/热度.png"></image>
				<view style="position: absolute; right: 0px; color: #ffd524;">12345</view>
			</view>
			<view class="group-item">
				<image class="number" src="../../static/image/5.png"></image>
				<view class="context">吃香的喝辣的</view>
				<image style="width: 20px;height: 20px; position: absolute; right: 50px;" src="../../static/image/热度.png"></image>
				<view style="position: absolute; right: 0px; color: #ffd524;">12345</view>
			</view>
			<view class="group-item">
				<image class="number" src="../../static/image/6.png"></image>
				<view class="context">吃香的喝辣的</view>
				<image style="width: 20px;height: 20px; position: absolute; right: 50px;" src="../../static/image/热度.png"></image>
				<view style="position: absolute; right: 0px; color: #ffd524;">12345</view>
			</view>
			<view class="group-item">
				<image class="number" src="../../static/image/7.png"></image>
				<view class="context">吃香的喝辣的</view>
				<image style="width: 20px;height: 20px; position: absolute; right: 50px;" src="../../static/image/热度.png"></image>
				<view style="position: absolute; right: 0px; color: #ffd524;">12345</view>
			</view>
		</uni-group>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				searchValue: '123123'
			}
		},
		methods: {
			search(res) {
				uni.showToast({
					title: '搜索：' + res.value,
					icon: 'none'
				})
			},
			cancel(res) {
				uni.showToast({
					title: '点击取消，输入值为：' + res.value,
					icon: 'none'
				})
			}
		}
	}
</script>

<style>
	.content {
		padding: 0px 5px;
	}

	.search-result {
		width: calc(100%-10px);
		height: 150px;
		background-color: white;
		border-radius: 5px;
	}

	.group-item {
		display: flex;
		margin-top: 20px;
		position: relative;
	}

	.number {
		width: 25px;
		height: 25px;
	}

	.context {
		height: 25px;
		line-height: 25px;
		border-bottom: 2px solid #ffd524;
		max-width: 70%;
		overflow: hidden;
	}
</style>